<template>
  <div class="home-con">
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="dd_item">
          <div><img :src="item.img" /></div>
          <div class="dd_text">
            <div>{{ item.name }}</div>
            <div>{{ item.price }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="daichuli">
      <div class="top">待处理事务</div>
      <ul>
        <li v-for="(item, index) in daichuliArr" :key="index">
          <span>{{ item.name }}</span
          ><span class="num">({{ item.num }})</span>
        </li>
      </ul>
    </div>

    <div class="zonglan">
      <div class="zonglan1">
        <div>
          <div class="top">商品总览</div>
          <ul>
            <li v-for="(item, index) in spzonglanArr" :key="index">
              <div class="fot">
                <div class="num">{{ item.num }}</div>
                <div>{{ item.name }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="zonglan2">
        <div>
          <div class="top">用户总览</div>
          <ul>
            <li v-for="(item, index) in spzonglanArr" :key="index">
              <div class="fot">
                <div class="num">{{ item.num }}</div>
                <div>{{ item.name }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="tongji">
      <div class="top">订单统计</div>
      <div class="down">
        <div class="downleft">
          <ul>
            <li v-for="(item, index) in tongjiArr" :key="index">
              <div>{{ item.name }}</div>
              <div>{{ item.num }}</div>
              <div>
                <!-- <span v-if="changeColor(item.baifen) != -1" class="green">{{item.baifen}}%</span> -->
                <!-- <span v-else class="red">{{ item.baifen }}%</span> -->
                <span>{{ item.baifen }}%</span>
                <span>{{ item.time }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="downright">
          <div id="mychart" class="mychart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数1",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日订单总数2",
          price: "300",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "今日订单总数3",
          price: "400",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
      daichuliArr: [
        { id: 1, name: "代付款订单", num: 10 },
        { id: 2, name: "代付款订单", num: 10 },
        { id: 3, name: "代付款订单", num: 10 },
        { id: 4, name: "代付款订单", num: 10 },
        { id: 5, name: "代付款订单", num: 10 },
        { id: 6, name: "代付款订单", num: 10 },
        { id: 7, name: "代付款订单", num: 10 },
        { id: 8, name: "代付款订单", num: 10 },
        { id: 9, name: "代付款订单", num: 10 },
      ],
      spzonglanArr: [
        { id: 1, name: "已下架", num: 1000 },
        { id: 2, name: "已下架", num: 1000 },
        { id: 3, name: "已下架", num: 1000 },
        { id: 4, name: "已下架", num: 1000 },
      ],
      tongjiArr: [
        {
          id: 1,
          name: "本月订单统计",
          num: 1000,
          baifen: +10,
          time: "同比上月",
        },
        {
          id: 2,
          name: "本月订单统计",
          num: 1000,
          baifen: -10,
          time: "同比上周",
        },
        {
          id: 3,
          name: "本月订单统计",
          num: 1000,
          baifen: +10,
          time: "同比上月",
        },
        {
          id: 4,
          name: "本月订单统计",
          num: 1000,
          baifen: -10,
          time: "同比上周",
        },
        {
          id: 5,
          name: "本月订单统计",
          num: 1000,
          baifen: +10,
          time: "同比上月",
        },
        {
          id: 6,
          name: "本月订单统计",
          num: 1000,
          baifen: -10,
          time: "同比上周",
        },
      ],
      option: {
        //图表数据
        //x轴数据
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        //y轴
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [400, 200, 150, 80, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
    };
  },
  mounted() {
    //调用 画图表的函数
    this.drawLine();
  },
  methods: {
    drawLine() {
      //1.初始化
      let mycharts = this.$echarts.init(document.getElementById("mychart"));
      //2.绘制
      mycharts.setOption(this.option);
    },
  },
};
</script>

<style lang="scss">
.home-con {
  margin: 10px;
}
.dd_item {
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  padding: 10px;
  border-radius: 5px;
}
.dd_item img {
  width: 50px;
  height: 50px;
}
.dd_text {
  padding-left: 10px;
}

.dd_item2 {
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  border-radius: 5px;
}

.daichuli {
  width: 100%;
  height: 150px;
  border: 1px solid grey;
  .top {
    background: lightblue;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    li {
      display: flex;
      width: 30%;
      height: 40px;
      line-height: 40px;
      justify-content: space-between;
      border-bottom: 1px solid grey;
      .num {
        color: crimson;
      }
    }
  }
}
.zonglan {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.zonglan1 {
  width: 49%;
  height: 150px;
  border: 1px solid grey;
  .top {
    background: lightblue;
  }
  ul {
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-around;
    align-items: center;

    li {
      // display: flex;
      width: 25%;
      height: 20px;
      line-height: 20px;
      // justify-content: space-between;
      // border-bottom: 1px solid grey;
      list-style: none;
      .fot {
        width: 90%;
        // background: lawngreen;
        position: relative;
        top: 40px;
        left: 30px;
      }
      .num {
        color: crimson;
      }
    }
  }
}
.zonglan2 {
  width: 49%;
  height: 150px;
  border: 1px solid grey;
  .top {
    background: lightblue;
  }
  ul {
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-around;
    align-items: center;

    li {
      // display: flex;
      width: 25%;
      height: 20px;
      line-height: 20px;
      // justify-content: space-between;
      // border-bottom: 1px solid grey;
      list-style: none;
      .fot {
        width: 90%;
        // background: lawngreen;
        position: relative;
        top: 40px;
        left: 30px;
      }
      .num {
        color: crimson;
      }
    }
  }
}
.tongji {
  width: 100%;
  // height: 300px;
  border: 1px solid grey;
  margin-top: 10px;
  .top {
    background: lightblue;
  }
  .down {
    width: 100%;
    display: flex;
    .downleft {
      width: 20%;
      border-right: 1px solid grey;
      text-align: left;
    }
    .downright {
      .mychart {
        width: 600px;
        height: 400px;
      }
    }
  }
}
</style>